<?php
include '../includes/functions.php';
echo db_connect();

$chapter_get = $_GET['c'];
$section_get = $_GET['s'];

$content = "<div id='c-0' class='cont_item'><span id='header'>ClientTracker Documentation</span><br><br>Welcome to ClientTracker Support! Please choose a selection from the list below to get started.<br><br></div>"; 

$sql1 = "SELECT * FROM documentation_chapters ORDER BY `order`"; //echo $sql1;
$result1 = mysql_query($sql1);
while ($row1 = mysql_fetch_array($result1) )  {
  $chapter_id = $row1[0];
  $chapter_title = $row1[1];
  $chapter_number = $row1[2];
	
	if ($chapter_get == $chapter_id) {$chapter_state = "";}else{$chapter_state = "closed";}

  $menu .= "<li class='$chapter_state'><span class='folder' id ='ch-$chapter_id'>Chapter $chapter_number :: $chapter_title</span>\n  <ul>\n";
  $sql2 = "SELECT * FROM documentation_sections WHERE documentation_chapter_id = '$chapter_id' ORDER BY section_num, `order` ";
  $result2 = mysql_query($sql2);
  while ($row2 = mysql_fetch_array($result2) )  {
	$section_id = $row2[0];
	$section_title = $row2[2];
	$section_text =  $row2[3]; 
	$section_number = $row2[4];
	
	$content .= "<div id='c-$section_id' class='cont_item'><span id='header'>$section_number :: $section_title</span><br><br>$section_text</div>";
	
	$menu .= "   <li><span class='file' id = 'f-$section_id' onClick=\"showHide($section_id);\">$section_number :: $section_title</span></li>\n"; 
	
	}
  $menu .= "  </ul>\n </li>\n";
} 

if ($section_get) {
  $initial_content = "$('#c-$section_get').fadeIn('fast');\n";
 }else{
  $initial_content = "$('#c-0').fadeIn('fast');\n";
}

?>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/treeview/demo/screen.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.js"></script>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
	    $("#menu").treeview();    
		 $("[class=folder]").click(function() {
			
				var currentId = $(this).attr('id');
				var openOne = $("#selected").val();
				if (openOne != "") {
					//$('#selected').val('');
					//$("#"+openOne).click(); // close open one 
					//setTimeout ("$('#selected').val(currentId);",1000); // save current one as open. timeout to stop recursion  	
					
				}
				 
			   
		 });
		 <?=$initial_content?>
	  });
	
function showHide(section_id) {
	$("*[id^=c-]").hide(); 
	$('#c-'+section_id).fadeIn('fast');
	
	$("*[id^=f-]").css('background-color', 'white'); 
	$('#f-'+section_id).css('background-color', '#eee');
	
	
}
</script>
<title>ClientTracker Manual</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
	.left_tree {
		float:left;
		width:300px;
		padding-top:20px; 
		background-color: #fff;
	}
	.main {
		position:absolute;
		left: 300px;
		top: 40px;
		padding-top:20px;
		max-width:
	}
	.header {
		padding:8px;
		background-color: green;
		font-size:18px;
		color: white;
	}
	.version {
	  	font-size:10px;
		color:black; 
	}
	
	.cont_item {
		display:none;
	} 
	
	#content {
	  	font-size:14px;
		color:black;
		padding:8px;
		padding-right:25px;
		background-color: #eee;
		min-width:400px;            
	}
	
	#header {
		font-size:18px;
		font-weight:bold;
		
	}
</style>
</head>

<body>
<div class="header">ClientTracker Manual <span class='version'>Version 4.0</span></div>
<div class="left_tree">
<ul id="menu" class="filetree">
	  <?=$menu?>
 </ul>
</div>
<div class="main" id = "content"><?=$content?></div>
<form action="index_submit" method="get" accept-charset="utf-8">
<input type="hidden" name="selected" value="" id="selected">
</form>
</body>
</html>